<template>
  <div class="mt-14">
    <h2 class="flex justify-center items-center mb-7 text-gray-500">
      全部评论<span>({{ total }})</span>
    </h2>
    <!-- 卡片 -->
    <div :class="props.customeCss">
      <!-- 评论发布表单 -->
      <form>
        <div class="flex gap-3">
          <!-- 头像 -->
          <div>
            <img
              v-if="
                commentStore.userInfo.avatar &&
                commentStore.userInfo.avatar.length > 0
              "
              :src="commentStore.userInfo.avatar"
              class="w-10 h-10 rounded-full"
            />
            <svg
              v-else
              class="w-10 h-10 text-gray-400 dark:text-gray-400"
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
              fill="currentColor"
              viewBox="0 0 20 20"
            >
              <path
                d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z"
              />
            </svg>
          </div>
          <!-- 昵称、邮箱、网址、评论内容 -->
          <div class="grow">
            <div class="flex items-center gap-5 flex-row">
              <div class="flex basis-1/3">
                <span
                  class="inline-flex border-e-0 items-center px-3 text-xs text-gray-900 bg-gray-100 border rounded-e-0 border-gray-300 rounded-s-md dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600"
                >
                  昵称
                </span>
                <input
                  @blur="onNicknameInputBlur"
                  v-model="commentStore.userInfo.nickname"
                  data-tooltip-target="nickname-tooltip-click"
                  data-tooltip-trigger="click"
                  type="text"
                  id="website-admin"
                  class="rounded-none rounded-e-lg border text-gray-900 focus:ring-sky-500 focus:border-sky-500 block flex-1 min-w-0 w-full text-xs border-gray-300 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-sky-500 dark:focus:border-sky-500"
                  placeholder="必填"
                />
                <!-- 昵称 Tooltip -->
                <div
                  id="nickname-tooltip-click"
                  role="tooltip"
                  class="absolute z-10 invisible inline-block px-3 py-2 text-xs font-medium text-white bg-gray-900 rounded-md shadow-sm opacity-0 tooltip dark:bg-gray-700"
                >
                  输入 QQ 号会自动获取昵称和头像
                  <div class="tooltip-arrow" data-popper-arrow></div>
                </div>
              </div>
              <div class="flex basis-1/3">
                <span
                  class="inline-flex border-e-0 items-center px-3 text-xs text-gray-900 bg-gray-100 border rounded-e-0 border-gray-300 rounded-s-md dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600"
                >
                  邮箱
                </span>
                <input
                  v-model="commentStore.userInfo.mail"
                  data-tooltip-target="mail-tooltip-click"
                  data-tooltip-trigger="click"
                  type="text"
                  id="website-admin"
                  class="rounded-none rounded-e-lg border text-gray-900 focus:ring-sky-500 focus:border-sky-500 block flex-1 min-w-0 w-full text-xs border-gray-300 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-sky-500 dark:focus:border-sky-500"
                  placeholder="必填"
                />
                <!-- 邮箱 Tooltip -->
                <div
                  id="mail-tooltip-click"
                  role="tooltip"
                  class="absolute z-10 invisible inline-block px-3 py-2 text-xs font-medium text-white bg-gray-900 rounded-md shadow-sm opacity-0 tooltip dark:bg-gray-700"
                >
                  收到回复将会发送到您的邮箱
                  <div class="tooltip-arrow" data-popper-arrow></div>
                </div>
              </div>
              <div class="flex basis-1/3">
                <span
                  class="inline-flex border-e-0 items-center px-3 text-xs text-gray-900 bg-gray-100 border rounded-e-0 border-gray-300 rounded-s-md dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600"
                >
                  网址
                </span>
                <input
                  v-model="commentStore.userInfo.website"
                  data-tooltip-target="website-tooltip-click"
                  data-tooltip-trigger="click"
                  type="text"
                  id="website-admin"
                  class="rounded-none rounded-e-lg border text-gray-900 focus:ring-sky-500 focus:border-sky-500 block flex-1 min-w-0 w-full text-xs border-gray-300 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-sky-500 dark:focus:border-sky-500"
                  placeholder="选填"
                />
                <!-- 网址 Tooltip -->
                <div
                  id="website-tooltip-click"
                  role="tooltip"
                  class="absolute z-10 invisible inline-block px-3 py-2 text-xs font-medium text-white bg-gray-900 rounded-md shadow-sm opacity-0 tooltip dark:bg-gray-700"
                >
                  可通过点击头像访问你的网站 (非必填)
                  <div class="tooltip-arrow" data-popper-arrow></div>
                </div>
              </div>
            </div>
            <div
              class="w-full mb-4 mt-4 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-700 dark:border-gray-600"
            >
              <div class="px-4 py-2 bg-white rounded-t-lg dark:bg-gray-800">
                <label for="comment" class="sr-only">Your comment</label>
                <textarea
                  id="comment"
                  rows="4"
                  v-model="commentForm.content"
                  class="w-full px-0 text-sm text-gray-900 bg-white border-0 dark:bg-gray-800 focus:ring-0 dark:text-white dark:placeholder-gray-400"
                  placeholder="发表一个友善的评论吧..."
                  required
                ></textarea>
              </div>
              <div
                class="flex items-center justify-between px-3 py-2 border-t dark:border-gray-600"
              >
                <div
                  @click="onPublishCommentClick"
                  class="inline-flex items-center py-2.5 px-4 text-xs font-medium text-center text-white bg-sky-600 rounded-lg focus:ring-4 focus:ring-sky-200 dark:focus:ring-sky-900 hover:bg-sky-700"
                >
                  发送
                </div>
                <div class="flex ps-0 space-x-1 rtl:space-x-reverse sm:ps-2">
                  <!-- Emoji -->
                  <div
                    data-popover-target="popover-emoji"
                    type="button"
                    class="inline-flex justify-center items-center p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600"
                  >
                    <svg
                      class="w-4 h-4"
                      aria-hidden="true"
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
                    >
                      <path
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M15 9h0M9 9h0m12 3a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM7 13c0 1 .5 2.4 1.5 3.2a5.5 5.5 0 0 0 7 0c1-.8 1.5-2.2 1.5-3.2 0 0-2 1-5 1s-5-1-5-1Z"
                      />
                    </svg>
                  </div>

                  <!-- Emoji Popover -->
                  <div
                    data-popover
                    id="popover-emoji"
                    role="tooltip"
                    class="absolute z-10 invisible inline-block w-64 text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800"
                  >
                    <div class="p-2">
                      <div class="grid grid-cols-6 gap-2">
                        <div
                          v-for="(emoji, index) in emojis"
                          :key="index"
                          class="text-2xl hover:cursor-pointer"
                          @click="addEmoji(emoji)"
                        >
                          {{ emoji }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </form>

      <!-- 评论列表 -->
      <div
        v-if="comments && comments.length > 0"
        v-for="(comment, index) in comments"
        :key="index"
      >
        <!-- 边界线 -->
        <div
          v-if="index > 0"
          class="border-t ml-12 mt-5 border-gray-100 dark:border-gray-700"
        ></div>

        <!-- 一级评论 -->
        <div class="flex gap-3 mt-5">
          <!-- 左边头像栏 -->
          <div>
            <a
              v-if="comment.website && comment.website.length > 0"
              @click="jumpToWebsite(comment.website)"
              class="cursor-pointer"
            >
              <img
                v-if="comment.avatar && comment.avatar.length > 0"
                :src="comment.avatar"
                class="w-10 h-10 rounded-full"
              />
              <svg
                v-else
                class="w-10 h-10 text-gray-400 rounded-full dark:text-gray-400"
                aria-hidden="true"
                xmlns="http://www.w3.org/2000/svg"
                fill="currentColor"
                viewBox="0 0 20 20"
              >
                <path
                  d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z"
                />
              </svg>
            </a>
            <div v-else>
              <img
                v-if="comment.avatar && comment.avatar.length > 0"
                :src="comment.avatar"
                class="w-10 h-10 rounded-full"
              />
              <svg
                v-else
                class="w-10 h-10 text-gray-400 rounded-full dark:text-gray-400"
                aria-hidden="true"
                xmlns="http://www.w3.org/2000/svg"
                fill="currentColor"
                viewBox="0 0 20 20"
              >
                <path
                  d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z"
                />
              </svg>
            </div>
          </div>
          <!-- 右边评论信息 -->
          <div class="flex flex-col gap-2 grow">
            <!-- 昵称 -->
            <div class="text-xs text-[#FB7299] font-bold">
              {{ comment.nickname }}
            </div>
            <!-- 评论内容 -->
            <div class="text-sm dark:text-gray-400">{{ comment.content }}</div>
            <!-- Meta 信息 -->
            <div class="flex items-center text-xs text-gray-400">
              <!-- 发布时间 -->
              <div>{{ comment.createTime }}</div>
              <div
                class="text-gray-400 cursor-pointer ml-4 hover:text-sky-600"
                @click="
                  showReplyForm(index, comment.nickname, comment.id, comment.id)
                "
              >
                回复
              </div>
            </div>
          </div>
        </div>

        <!-- 二级评论 -->
        <div
          class="ml-12"
          v-if="comment.childComments && comment.childComments.length > 0"
        >
          <div
            v-for="(childComment, index2) in comment.childComments"
            :key="index2"
          >
            <!-- 头像、昵称、评论内容 -->
            <div class="flex items-center gap-3 mt-5">
              <!-- 左边头像栏 -->
              <div>
                <a
                  v-if="childComment.website && childComment.website.length > 0"
                  @click="jumpToWebsite(childComment.website)"
                  class="cursor-pointer"
                >
                  <img
                    v-if="childComment.avatar && childComment.avatar.length > 0"
                    :src="childComment.avatar"
                    class="w-6 h-6 rounded-full"
                  />
                  <svg
                    v-else
                    class="w-6 h-6 text-gray-400 rounded-full dark:text-gray-400"
                    aria-hidden="true"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="currentColor"
                    viewBox="0 0 20 20"
                  >
                    <path
                      d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z"
                    />
                  </svg>
                </a>
                <div v-else>
                  <img
                    v-if="childComment.avatar && childComment.avatar.length > 0"
                    :src="childComment.avatar"
                    class="w-6 h-6 rounded-full"
                  />
                  <svg
                    v-else
                    class="w-6 h-6 text-gray-400 rounded-full dark:text-gray-400"
                    aria-hidden="true"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="currentColor"
                    viewBox="0 0 20 20"
                  >
                    <path
                      d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z"
                    />
                  </svg>
                </div>
              </div>
              <!-- 昵称 -->
              <div class="text-xs text-[#FB7299] font-bold">
                {{ childComment.nickname }}
                <!-- 【回复 @xxx】 -->
                <span
                  v-if="childComment.replyNickname"
                  class="text-gray-400 font-normal ml-1 mr-1"
                  >回复
                  <span class="text-sky-600 font-normal text-sm"
                    >@{{ childComment.replyNickname }}</span
                  >
                  <span class="text-gray-400"> :</span>
                </span>
              </div>
              <!-- 评论内容 -->
              <div class="text-sm dark:text-gray-400">
                {{ childComment.content }}
              </div>
            </div>
            <!-- Meta 信息 -->
            <div class="ml-9 mt-1 flex items-center text-xs text-gray-400">
              <!-- 发布时间 -->
              <div>{{ childComment.createTime }}</div>
              <div
                class="text-gray-400 cursor-pointer ml-4 hover:text-sky-600"
                @click="
                  showReplyForm(
                    index,
                    childComment.nickname,
                    childComment.id,
                    comment.id
                  )
                "
              >
                回复
              </div>
            </div>
          </div>
        </div>

        <!-- 二级评论回复表单 -->
        <form class="ml-12 mt-5" v-if="comment.isShowReplyForm">
          <div class="flex gap-3">
            <!-- 头像 -->
            <div>
              <img
                v-if="
                  commentStore.userInfo.avatar &&
                  commentStore.userInfo.avatar.length > 0
                "
                :src="commentStore.userInfo.avatar"
                class="w-10 h-10 rounded-full"
              />
              <svg
                v-else
                class="w-10 h-10 text-gray-400 dark:text-gray-400"
                aria-hidden="true"
                xmlns="http://www.w3.org/2000/svg"
                fill="currentColor"
                viewBox="0 0 20 20"
              >
                <path
                  d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z"
                />
              </svg>
            </div>
            <!-- 昵称、邮箱、网址、评论内容 -->
            <div class="grow">
              <div class="flex items-center gap-5 flex-row">
                <div class="flex basis-1/3">
                  <span
                    class="inline-flex border-e-0 items-center px-3 text-xs text-gray-900 bg-gray-100 border rounded-e-0 border-gray-300 rounded-s-md dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600"
                  >
                    昵称
                  </span>
                  <input
                    @blur="onNicknameInputBlur"
                    v-model="commentStore.userInfo.nickname"
                    data-tooltip-target="nickname-tooltip-click2"
                    data-tooltip-trigger="click"
                    type="text"
                    id="website-admin"
                    class="rounded-none rounded-e-lg border text-gray-900 focus:ring-sky-500 focus:border-sky-500 block flex-1 min-w-0 w-full text-xs border-gray-300 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-sky-500 dark:focus:border-sky-500"
                    placeholder="必填"
                  />
                  <!-- 昵称 Tooltip -->
                  <div
                    id="nickname-tooltip-click2"
                    role="tooltip"
                    class="absolute z-10 invisible inline-block px-3 py-2 text-xs font-medium text-white bg-gray-900 rounded-md shadow-sm opacity-0 tooltip dark:bg-gray-700"
                  >
                    输入 QQ 号会自动获取昵称和头像
                    <div class="tooltip-arrow" data-popper-arrow></div>
                  </div>
                </div>
                <div class="flex basis-1/3">
                  <span
                    class="inline-flex border-e-0 items-center px-3 text-xs text-gray-900 bg-gray-100 border rounded-e-0 border-gray-300 rounded-s-md dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600"
                  >
                    邮箱
                  </span>
                  <input
                    v-model="commentStore.userInfo.mail"
                    data-tooltip-target="mail-tooltip-click2"
                    data-tooltip-trigger="click"
                    type="text"
                    id="website-admin"
                    class="rounded-none rounded-e-lg border text-gray-900 focus:ring-sky-500 focus:border-sky-500 block flex-1 min-w-0 w-full text-xs border-gray-300 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-sky-500 dark:focus:border-sky-500"
                    placeholder="必填"
                  />
                  <!-- 邮箱 Tooltip -->
                  <div
                    id="mail-tooltip-click2"
                    role="tooltip"
                    class="absolute z-10 invisible inline-block px-3 py-2 text-xs font-medium text-white bg-gray-900 rounded-md shadow-sm opacity-0 tooltip dark:bg-gray-700"
                  >
                    收到回复将会发送到您的邮箱
                    <div class="tooltip-arrow" data-popper-arrow></div>
                  </div>
                </div>
                <div class="flex basis-1/3">
                  <span
                    class="inline-flex border-e-0 items-center px-3 text-xs text-gray-900 bg-gray-100 border rounded-e-0 border-gray-300 rounded-s-md dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600"
                  >
                    网址
                  </span>
                  <input
                    v-model="commentStore.userInfo.website"
                    data-tooltip-target="website-tooltip-click2"
                    data-tooltip-trigger="click"
                    type="text"
                    id="website-admin"
                    class="rounded-none rounded-e-lg border text-gray-900 focus:ring-sky-500 focus:border-sky-500 block flex-1 min-w-0 w-full text-xs border-gray-300 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-sky-500 dark:focus:border-sky-500"
                    placeholder="选填"
                  />
                  <!-- 网址 Tooltip -->
                  <div
                    id="website-tooltip-click2"
                    role="tooltip"
                    class="absolute z-10 invisible inline-block px-3 py-2 text-xs font-medium text-white bg-gray-900 rounded-md shadow-sm opacity-0 tooltip dark:bg-gray-700"
                  >
                    可通过点击头像访问你的网站 (非必填)
                    <div class="tooltip-arrow" data-popper-arrow></div>
                  </div>
                </div>
              </div>
              <div
                class="w-full mb-4 mt-4 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-700 dark:border-gray-600"
              >
                <div class="px-4 py-2 bg-white rounded-t-lg dark:bg-gray-800">
                  <label for="comment" class="sr-only">Your comment</label>
                  <textarea
                    id="comment"
                    rows="4"
                    v-model="replyContent"
                    class="w-full px-0 text-sm text-gray-900 bg-white border-0 dark:bg-gray-800 focus:ring-0 dark:text-white dark:placeholder-gray-400"
                    :placeholder="replyPlaceholderText"
                    required
                  ></textarea>
                </div>
                <div
                  class="flex items-center justify-between px-3 py-2 border-t dark:border-gray-600"
                >
                  <div
                    @click="onReplyContentSubmit"
                    class="inline-flex items-center py-2.5 px-4 text-xs font-medium text-center text-white bg-sky-600 rounded-lg focus:ring-4 focus:ring-sky-200 dark:focus:ring-sky-900 hover:bg-sky-700"
                  >
                    发送
                  </div>
                  <div class="flex ps-0 space-x-1 rtl:space-x-reverse sm:ps-2">
                    <!-- Emoji -->
                    <div
                      data-popover-target="popover-emoji2"
                      type="button"
                      class="inline-flex justify-center items-center p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600"
                    >
                      <svg
                        class="w-4 h-4"
                        aria-hidden="true"
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                      >
                        <path
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                          d="M15 9h0M9 9h0m12 3a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM7 13c0 1 .5 2.4 1.5 3.2a5.5 5.5 0 0 0 7 0c1-.8 1.5-2.2 1.5-3.2 0 0-2 1-5 1s-5-1-5-1Z"
                        />
                      </svg>
                    </div>

                    <!-- Emoji Popover -->
                    <div
                      data-popover
                      id="popover-emoji2"
                      role="tooltip"
                      class="absolute z-10 invisible inline-block w-64 text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800"
                    >
                      <div class="p-2">
                        <div class="grid grid-cols-6 gap-2">
                          <div
                            v-for="(emoji, index) in emojis"
                            :key="index"
                            class="text-2xl hover:cursor-pointer"
                            @click="addReplyEmoji(emoji)"
                          >
                            {{ emoji }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </form>
      </div>
      <!-- 没有评论的提示文字 -->
      <div
        v-else
        class="flex items-center mt-10 mb-10 justify-center text-gray-400"
      >
        还没有任何评论哟~
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, nextTick, initCustomFormatter } from "vue";
import { initTooltips, initPopovers } from "flowbite";
import { useCommentStore } from "@/stores/comment";
import { useRoute } from "vue-router";
import { showMessage } from "@/composales/utils";

import {
  publishComment,
  getComments,
  getUserInfoByQQ,
} from "@/api/frontend/comment";

onMounted(() => {
  initTooltips(), initPopovers();
});

// 总评论数
const total = ref(0);

const route = useRoute();

const commentStore = useCommentStore();

// 评论表单
const commentForm = reactive({
  avatar: "",
  content: "",
  mail: "",
  nickname: "",
  routerUrl: route.path,
  website: "",
  replyCommentId: null,
  parentCommentId: null,
});

// 获取评论列表
function initComments() {
  // 获取当前路由下的所有评论
  getComments(route.path).then((res) => {
    if (res.success) {
      total.value = res.data.total;
      comments.value = res.data.comments;

      console.log(commentStore.value);
    }
  });
}
initComments();

// 初始化 commentForm 表单对象中的用户信息
function initFormCommentUserInfo() {
  commentForm.avatar = commentStore.userInfo.avatar;
  commentForm.mail = commentStore.userInfo.mail;
  commentForm.nickname = commentStore.userInfo.nickname;
  commentForm.website = commentStore.userInfo.website;
}
initFormCommentUserInfo();

// 邮箱正则
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

// 一级评论发布点击事件
const onPublishCommentClick = () => {
  initCustomFormatter();

  // 校验
  if (commentForm.nickname.length === 0) {
    showMessage("请填写 QQ 号或昵称", "warning");
    return;
  }
  if (commentForm.mail.length === 0 || !emailRegex.test(commentForm.mail)) {
    showMessage("邮箱格式不正确", "warning");
    return;
  }
  if (commentForm.content.length === 0) {
    showMessage("请填写评论内容", "warning");
    return;
  }

  publishComment(commentForm).then((res) => {
    if (!res.success) {
      // 获取服务端返回的错误消息
      let message = res.message;
      // 提示错误消息
      showMessage(message, "warning");
      commentForm.content = "";
      return;
    }
    showMessage("评论发布成功");
    // 将表单对象中的 content 评论内容置空
    commentForm.content = "";
    // 重新渲染表单列表
    initComments();
  });
};

// 回复的评论
const replyContent = ref("");

// 一级评论回复发送事件
const onReplyContentSubmit = () => {
  initFormCommentUserInfo();
  // 校验
  if (commentForm.nickname.length === 0) {
    showMessage("请填写 QQ 号或昵称", "warning");
    return;
  }
  if (commentForm.mail.length === 0 || !emailRegex.test(commentForm.mail)) {
    showMessage("邮箱格式不正确", "warning");
    return;
  }
  if (replyContent.value.length === 0) {
    showMessage("请填写回复内容", "warning");
    return;
  }
  // 评论回复内容
  commentForm.content = replyContent.value;
  commentForm.replyCommentId = currReplyCommentId.value;
  commentForm.parentCommentId = currParentCommentId.value;

  // 请求接口
  publishComment(commentForm).then((res) => {
    if (!res.success) {
      // 获取服务端返回的错误消息
      let message = res.message;
      // 提示错误消息
      showMessage(message, "error");
      return;
    }

    showMessage("回复评论成功");
    // 将评论回复的内容置空
    replyContent.value = "";
    commentForm.content = "";
    // 重新渲染评论列表
    initComments();
  });
};

// 当前回复的评论 ID
const currReplyCommentId = ref(null);
// 当前回复的父级 ID
const currParentCommentId = ref(null);

// emojis 表情符号
const emojis = ref([
  "😃",
  "😁",
  "😅",
  "😂",
  "😍",
  "😜",
  "😝",
  "🤑",
  "🥵",
  "🥰",
  "😙",
  "😎",
  "😵",
  "😭",
  "😱",
  "😖",
  "🥳",
  "👽",
  "🙈",
  "🤡",
  "😤",
  "💣",
  "💯",
  "💢",
  "❤️",
  "👍",
  "👏",
  "👋",
  "👌",
  "🤏",
  "🙏",
]);

// 添加 Emoji 表情
const addEmoji = (emoji) => {
  commentForm.content = commentForm.content + emoji;
};

// 昵称输入框 blUr 事件
const onNicknameInputBlur = () => {
  let nickname = commentStore.userInfo.nickname;

  // 校验昵称是否是纯数字
  if (!checkIfPureNumber(nickname)) return;

  // 若是，请求后端接口，根据 QQ 号获取用户信息
  getUserInfoByQQ(nickname).then((res) => {
    if (!res.success) {
      // 提示错误消息
      showMessage("获取 QQ 信息失败 ", "error");
      return;
    }
    commentStore.userInfo.avatar = res.data.avatar;
    commentStore.userInfo.nickname = res.data.nickname;
    commentStore.userInfo.mail = res.data.mail;
  });
};

// 评论数组
const comments = ref([]);

// 跳转评论用户网址
const jumpToWebsite = (url) => {
  // 在新窗口访问新的链接地址
  window.open(url.startsWith("http") ? url : "http://" + url, "_blank");
};

// 回复 textarea 的 placeholder 提示文字
const replyPlaceholderText = ref("发表一个友善的评论吧...");
// 展示回复表单
const showReplyForm = (index, nickname, replyCommentId, parentCommentId) => {
  currReplyCommentId.value = replyCommentId;
  currParentCommentId.value = parentCommentId;
  // 先将评论数组中一级评论的所有 isShowReplyForm 字段设置为 false
  comments.value.forEach((comment) => (comment.isShowReplyForm = false));
  // 拿到当前下标的评论
  let comment = comments.value[index];
  // isShowReplyForm 置为 true
  comment.isShowReplyForm = true;

  // 动态设置评论回复表单中的 textarea 的 placeholder 提示文字
  replyPlaceholderText.value = "回复 @" + nickname + ":";

  nextTick(() => {
    initPopovers(), initTooltips();
  });
};

// QQ 号校验，是否是纯数字
function checkIfPureNumber(text) {
  const trimmedValue = text.trim();
  return /^\d+$/.test(trimmedValue);
}

// 评论回复表单：添加 Emoji
const addReplyEmoji = (emoji) => {
  replyContent.value = replyContent.value + emoji;
};

// 对外暴露属性
const props = defineProps({
  customeCss: {
    type: String,
    default:
      "w-full px-5 py-10 mb-3 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700",
  },
});
</script>